<template>
    <div>
        <XPTable ref='tableRef' :api='pageApi' :columns='columns'>
            <template #toolBar>
                <Edit @finish='finishEdit' title='新建表册'>
                    <a-button type='primary'>新建表册</a-button>
                </Edit>
            </template>
            <template #action='{record}'>
                <a-space :size='5'>
                    <router-link to='/meterFolderManagement/meterFolder/move'>添册</router-link>
                    <Edit @finish='finishEdit' :formData='record' title='编辑表册'>
                        <XTextButton type='primary'>编辑</XTextButton>
                    </Edit>
                    <XRequestButton isConfirm confirmText='确定删除吗' :click='() => deleteRecord(record)'>
                        <XTextButton type='danger'>删除</XTextButton>
                    </XRequestButton>
                </a-space>
            </template>
        </XPTable>
    </div>
</template>

<script lang='ts' setup>
    import { reactive, ref } from 'vue'
    import { meterFolderPageApi, deleteMeterFolderApi } from '@/api/meterFolderManagement'
    import { Column } from '@/types'
    import Edit from './Edit.vue'
    import { message } from 'ant-design-vue'
    
    const tableRef = ref()

    const columns = reactive<Column[]>([
        {title : '区域编码', dataIndex : 'a', align : 'center'},
        {title : '区域名称', dataIndex : 'b', align : 'center'},
        {title : '表册号', dataIndex : 'c', align : 'center'},
        {title : '表册名称', dataIndex : 'd', align : 'center', inFilter : true},
        {title : '表册类型', dataIndex : 'e', align : 'center'},
        {title : '抄表员', dataIndex : 'f', align : 'center', inFilter : true, filter : {type : 'select', options : [], labelField : 'name', valueField : 'code'}},
        {title : '备注', dataIndex : 'g', align : 'center'},
        {title : '操作', dataIndex : 'action', align : 'center'},
    ])

    async function pageApi(params:any) {
        return meterFolderPageApi(params)
    }

    function finishEdit() {
        tableRef.value.load()
    }

    async function deleteRecord(record:any) {
        const rs = await deleteMeterFolderApi(12)
        if(rs.success) {
            tableRef.value.load()
            message.success('删除成功')
        }else {
            message.error(rs.msg)
        }
    }

</script>
